<template>
    <div class="wrapper" >
        <div ref="test" @touchmove="move" class="box" ></div>
    </div>
</template>
<script>
    const animation = weex.requireModule('animation');
    const modal = weex.requireModule('modal');

    export default {
        methods: {
            move (e) {
                var testEl = this.$refs.test;
//                console.log(testEl);

                var t = e.changedTouches[0];
                var moveX = t.pageX;
                var moveY = t.pageY;

                animation.transition(testEl, {
                    styles: {
                        transform: 'translate(' + moveX + ', '+ moveY +')',    // 旋转60°
                        transformOrigin: 'left top'
                    },
                    duration: 100, //ms
                    timingFunction: 'linear',
                }, (e) => {
                    console.log(e);
                })
            },
            change () {
                var testEl = this.$refs.test;
                animation.transition(testEl, {
                    styles: {
                        backgroundColor: '#FF6655',
                        transform: 'translate(250px, 250px), scale(2, 2), rotate(' + Math.PI / 3 + ')',    // 旋转60°
                        transformOrigin: 'center center'
                    },
                    duration: 800, //ms
                    timingFunction: 'linear',
                    delay: 0 //ms
                }, () => {
                    modal.toast({ message: 'animation finished.' })
                })
            }
        }
    }
</script>
<style scoped>
    .box {
        width: 250px;
        height: 250px;
        background-color: #DDD;
    }
</style>